:host {
  display: block;
  padding: 12px;
}

.divide {
  margin: {
    left: 12px;
    right: 12px;
    top: 12px;
    bottom: 12px;
  }
}

.project {
  background: #fff;
  border-radius: 2px;
  overflow: hidden;
  position: relative;

  .header {
    position: relative;

    &:before {
      display: block;
      content: '';
      width: 100%;
      padding-top: 42.85714286%;
    }

    > .content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      color: #fff;
      padding: 8px 18px 24px 24px;

      .top-row {
        font-size: 12px;
      }

      .codename {
        font-size: 20px;
        font-weight: 700;
      }
    }
  }

  .details {
    padding: 20px 24px;

    .members {
      margin-top: 16px;
    }

    .divider {
      width: 100%;
      height: 1px;
      background: #e0e0e0;
      margin: 20px auto 16px;
    }

    .status {
      font-weight: 700;
      font-size: 14px;
      text-align: center;

      &.ongoing {
        color: #4caf50;
      }
    }
  }

  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s;

    .overlay-content {
      padding: 20px 24px 24px;
      height: 100%;

      .overlay-actions {
        .mat-icon-button {
          margin-right: 16px;
          background: #fff;
          color: #666;
          box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
            0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
        }
      }
    }
  }

  &:hover {
    .overlay {
      visibility: visible;
      opacity: 1;
    }
  }
}
